<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
import Zooming from 'zooming';

const { frontmatter } = defineProps({
  frontmatter: {
    type: Object,
    required: true,
  },
});

let zooming = null;

// 日期格式化
function formatDate(date) {
  if (!date) return '';
  const d = new Date(date);
  const year = d.getFullYear();
  const month = d.getMonth() + 1;
  const day = d.getDate();
  return `${year}-${month}-${day}`;
}

onMounted(() => {
  zooming = new Zooming({
    onClose: () => {
      document.body.removeAttribute('style');
    },
  });
  zooming.listen('.zoom-img');
});

onBeforeUnmount(() => {
  zooming = null;
});
</script>

<template>
  <div class="pt-8">
    <div class="mb-8">
      <h1 class="mb-0 slide-enter-50 text-3xl">
        {{ frontmatter.title }}
      </h1>
      <p class="opacity-50 slide-enter-50">
        {{ formatDate(frontmatter.date) }} 阅读时长：{{ frontmatter.duration }}
      </p>
    </div>
    <slot></slot>
    <div class="mt-8">
      <span>> </span>
      <router-link to="/" class="border-b text-[#409aed]" v-text="'返回'" />
    </div>
  </div>
</template>
